<template>
	<view class="meal-detais">
		<u-navbar :autoBack="true" leftIconColor="#fff" title="套餐详情" :bgColor="theme == 'light' ? '#0071ff' : '#2c2c2c'" :safeAreaInsetTop="true" :placeholder="true" titleStyle="color:#fff"> </u-navbar>
		<view class="flex bg-white margin-xs justify-between align-center padding-xs" style="flex: 1;">
			<view style="flex:1;">
				<image class="radius" style="width: 156upx;height: 156upx;" :src="baseImg+mealData.pkgImg"></image>
			</view>
			<view class="flex flex-direction padding-left-xs" style="flex:5;">
				<view class="text-bold text-df"> {{mealData.pkgName}}</view>
				<view class="text-xs text-gray" style="line-height: 1.6;">
					<text class="line3">
						<mp-html :content="mealData.pkgMinDesc"></mp-html>
					</text>
				</view>
				<view class="flex justify-between text-sm">
					<text class="text-gray">上架时间：{{mealData.createTime}}</text>
					<text class="text-red text-bold">￥{{mealData.pkgPrice}}</text>
				</view>
			</view>
		</view>
		<view class="bg-white margin-xs radius">
			<view class="cu-bar bg-white solid-bottom">
				<view class="action">
					<text class="text-bold">套餐权益</text>
				</view>
			</view>
			<view class="cu-list menu">
				<block v-for="item,index in pkgLegalList" :key="index">
					<view class="cu-item">
						<view class="content">
							<text class="text-grey">{{item.pkgLegalName}}</text>
						</view>
						<view class="action flex align-center text-gray">
							<view>
								{{item.pkgUnitVal}}{{pkgUnitType[item.pkgUnitType]}}
							</view>
							<text class="cuIcon-right"></text>
						</view>
					</view>
				</block>
			</view>
		</view>
		<!-- <view class="main">
			<view class="cu-list menu-avatar" style="margin:10px;border-radius: 10px;" v-for="item,index in pkgLegalList" :key="index">
				<view class="cu-item">
					<view class="cu-avatar round lg">
						<u--image :showLoading="true" :src="baseImg + pkgImg" width="55px" height="55px" radius="5rpx"></u--image>
					</view>
					<view class="content">
						<view class="text-grey" style="font-size: 34rpx;color: #2f82b1;">包含 ： {{item.pkgLegalName}}</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut text-color">
								{{item.pkgName}}
							</view>
							<view class="text-cut text-color" style="margin-left: 20rpx;">
								{{item.createTime}}
							</view>
						</view>
					</view>
					<view class="action" style="width: 150rpx;">
						<view class="text-grey text-xs">{{item.remark}}</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 二维码 -->
		<u-modal :show="show" :title="title" @confirm="confirm" confirmText="完成支付" :showCancelButton="true" @cancel="cancel">
			<view>
				<view style="padding: 30rpx;">
					<view style="margin: 50rpx;">订单生成成功:</view>
					<view>
						<u-button type="primary" text="点击去支付" @click="payClick"></u-button>
					</view>
				</view>
			</view>
		</u-modal>
		<view class="btn">
			<u-button type="primary" :plain="true" :hairline="true" text="购买" @click='purchase()'></u-button>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				pkgLegalList: [],
				pKid: null,
				pkgImg: null,
				show: false,
				contentUrl: '',
				orderId: undefined,
				Paystatus: {
					0: '订单生成',
					1: '支付中',
					2: '支付成功',
					3: '支付失败',
					4: '已撤销',
					5: '已退款',
					6: '订单关闭',
				},
				paySrc:'',
				title:'',
				mealData:{},
				pkgUnitType:{
					0:'次',
					1:'周',
					2:'字'
				}
			}
		},
		computed: {
			...mapState(['theme', ])

		},
		onLoad(options) {
			this.pKid = options.id
			this.pkgImg = options.pkgImg
			//查询套餐权益列表
			this.getpkgLegal(options)
		},

		methods: {
			cancel(){
				this.show = false
			},
			payClick(){
				window.location.href = this.contentUrl
			},
			async getpkgLegal(options) {
				let {
					data
				} = await uni.$u.http.get(`/aiv/pkgData/getInfo/${this.pKid}`);
				console.log(data)
				if (data.code == 200){
					this.mealData = data.data
					this.pkgLegalList = data.data.qiPkgLegals
				}
					// this.pkgLegalList = data.rows
			},

			//购买套餐
			async purchase() {
				uni.showLoading({
					title: '订单创建中～',
					mask: true
				})
				let userId = uni.getStorageSync('userInfo').id
				let {
					data
				} = await uni.$u.http.get(`/busi/userPkgOrders/payOrder?userId=${userId}&pkgId=${this.pKid}`);
				if (data.code == 200) {
					let res = JSON.parse(data.data)
					console.log(res)
					this.contentUrl = res.payData
					this.orderId = res.mchOrderNo
					this.show = true
					this.title = '订单号:' + res.mchOrderNo
				}


				uni.hideLoading()

			},

			//二维码确认之后的回调函数
			async confirm() {
				this.show = false;
				this.contentUrl = ''
				let {
					data
				} = await uni.$u.http.get(`/busi/userPkgOrders/getByOrderStatus?orderId=${this.orderId}`);
				if (data.code != 200) return uni.showToast({
					title: data.msg,
					icon: "none"
				});
				uni.showToast({
					title: this.Paystatus[data.data.payState],
					icon: "none"
				});


			}
		}

	};
</script>

<style lang="scss" scoped>
.meal-detais{
	.line3{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}
}
	.main {
		height: calc(100vh - 220rpx);
		overflow-y: scroll;

		.header {
			height: 240rpx;
			background-color: #016fd6;
			margin: 20rpx;
			border-radius: 40rpx;
			color: white;
			display: flex;
			padding: 10rpx;

			.title {
				width: 500rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-evenly;

				.z {
					font-weight: bold;
					font-size: 40rpx;
				}
			}

			.price {
				width: 180rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
		}
	}


	.btn {
		margin: 20rpx;
		position: fixed;
		bottom: 30rpx;
		width: calc(100% - 40rpx);
	}
</style>